<form id="addOrUpdateForm" lay-filter="addOrUpdateForm" class="layui-form model-form">

    <input name="id" type="hidden"/>
    <div class="layui-form-item">
    <label class="layui-form-label layui-form-required">上级栏目</label>
    <div class="layui-input-block">
        <div id="catalogSelectBox" class="ew-xmselect-tree"></div>
    </div>
</div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">分类名称</label>
        <div class="layui-input-block">
            <input name="name" class="layui-input" placeholder="请输入分类名称" lay-verType="tips" lay-verify="required" required/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">路径</label>
        <div class="layui-input-block">
            <input name="path" class="layui-input" placeholder="请输入路径" lay-verType="tips" lay-verify="required" required/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">序号</label>
        <div class="layui-input-block">
            <input name="orderNum" class="layui-input" placeholder="请输入序号" lay-verType="tips" lay-verify="required" required/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">栏目类型</label>
        <div class="layui-input-block">
            <div id="catalogTypeBox"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">是否显示</label>
        <div class="layui-input-block">
            <div id="isViewBox"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">显示为菜单</label>
        <div class="layui-input-block">
            <div id="isMenuBox"></div>
        </div>
    </div>

    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="formSubmitBtn" lay-submit>保存</button>
    </div>
</form>

<script>
    layui.use(['layer', 'form', 'admin', 'xnUtil', 'xmSelect', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var xnUtil = layui.xnUtil;
        var xmSelect = layui.xmSelect;
        var laydate = layui.laydate;

        var editData = admin.getLayerData('#addOrUpdateForm').data;

        if(editData !== null && editData !== undefined) {
            form.val('addOrUpdateForm', editData);
        }

        admin.req(getProjectUrl() + 'catalog/tree', function(res){
            // 渲染下拉树
            xmSelect.render({
                el: '#catalogSelectBox',
                name: 'pid',
                height: '250px',
                layVerify: 'required',
                layVerType: 'tips',
                data: xnUtil.handleZtreeDataRootNode(res.data),
                initValue: editData ? [editData.pid] : [],
                model: {label: {type: 'text'}},
                prop: {
                    name: 'title',
                    value: 'id'
                },
                radio: true,
                clickClose: true,
                tree: {
                    show: true,
                    indent: 15,
                    strict: false,
                    expandedKeys: true
                },
                tips: '请选择上级栏目'
            });
        }, {async: false});

        // 渲染字典下拉
        var catalogTypeDataRenderIns = xmSelect.render({
            el: '#catalogTypeBox',
            name: 'type',
            data: xnUtil.getDictDataByDictTypeCode('catalog_type', null),
            initValue: editData ? [editData.type] : [],
            layVerify: 'required',
            layVerType: 'tips',
            radio: true,
            clickClose: true,
            model: { icon:'hidden', label: { type: 'text' }},
            prop: {
                name: 'name',
                value: 'code'
            },
            tips: '请选择栏目类型'
        });

        var isViewRenderIns = xmSelect.render({
            el: '#isViewBox',
            name: 'isView',
            data: xnUtil.getDictDataByDictTypeCode('yes_or_no', null),
            initValue: editData ? [editData.isView] : [],
            layVerify: 'required',
            layVerType: 'tips',
            radio: true,
            clickClose: true,
            model: { icon:'hidden', label: { type: 'text' }},
            prop: {
                name: 'name',
                value: 'code'
            },
            tips: '请选择是否显示'
        });

        var isMenuRenderIns = xmSelect.render({
            el: '#isMenuBox',
            name: 'isMenu',
            data: xnUtil.getDictDataByDictTypeCode('yes_or_no', null),
            initValue: editData ? [editData.isMenu] : [],
            layVerify: 'required',
            layVerType: 'tips',
            radio: true,
            clickClose: true,
            model: { icon:'hidden', label: { type: 'text' }},
            prop: {
                name: 'name',
                value: 'code'
            },
            tips: '请选择是否显示为菜单'
        });

        /**
         * 表单提交事件
         */
        form.on('submit(formSubmitBtn)', function (data) {
            layer.load(2);

            var url = editData ? getProjectUrl() + 'catalog/edit' : getProjectUrl() + 'catalog/add';
            admin.req(url, JSON.stringify(data.field), function(res){
                layer.msg(res.message, {icon: 1, time: 1000}, function () {
                    admin.putLayerData('formOk', true, '#addOrUpdateForm');
                    admin.closeDialog('#addOrUpdateForm');
                });
            }, 'post');
            return false;
        });
    });
</script>
</body>
</html>
